<template>
  <div>
    <van-sticky>
      <van-button type="primary" @click="change">{{this.city}}<van-icon name="arrow-down" /></van-button>
    </van-sticky>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image.id">
        <img :src="image.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航栏 -->
    <van-sticky>
      <van-tabs v-model="activeName" @change="handleChange" >
        <van-tab title="正在热映" name="a"></van-tab>
        <van-tab title="即将上映" name="b"></van-tab>
      </van-tabs>
    </van-sticky>
    <!-- 列表 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'films',
  data() {
    return {
      images: [],
      activeName: '',
      city:localStorage.getItem('city')
    }
  },
  created() {
    this.getimages()
  },
  methods: {
    getimages() {
      this.$http.get('/banner').then((res) => {
        this.images = res.res
        console.log(this.images)
      })
    },
    handleChange() {
      console.log(this.activeName)
      if (this.activeName == 'a') {
        this.$router.push('/films/in_theaters')
      } else {
        this.$router.push('/films/coming_soon')
      }
    },
    change(){
      this.$router.push('/city')
    }
  },
}
</script>

<style>
.van-swipe img {
  height: 100%;
  width: 100%;
  margin:0
}
.van-button--primary {
    height: 30px;
    background-color: rgba(70, 63, 63, 0.3);
    border-color: rgba(70, 63, 63, 0.3);
    border-radius: 8px;
    /* position: fixed; */
    position: absolute;
    z-index: 1000;
    margin-top: 10px;
    margin-left: 10px;
}
.van-tabs__nav--card {
    margin: 0;
}
.van-tab--active {
    color: rgb(255, 95, 22);
}
.van-tabs__line {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    width: 40px;
    height: 3px;
    background-color: rgb(255, 95, 22);
    border-radius: 3px;
}
</style>
